<script setup lang="ts">
import { ElTag } from 'element-plus'
import { ref, computed } from 'vue'
const props = defineProps({
  tags: {
    type: Array,
    required: true,
    default: () => []
  }
})
//控制相关搜索数量
const showMore = ref(false)
const filteredData = computed(() => {
  if (showMore.value) {
    // return props.tags.slice(-10).reverse()
    return props.tags.slice(0, 10)

  } else {
    // return props.tags.slice(-5).reverse()
    return props.tags.slice(0, 5)
  }
})
const emit = defineEmits(['concatValue'])
const Country = (key: string) => {
  emit('concatValue', key)
}
// 相关搜索更多
const linkMore = () => {
  showMore.value = !showMore.value
}
//点击删除当前标签
// const handleClose = (item: string) => {
//   console.log(filteredData.value)
//  filteredData.value.splice(filteredData.value.indexOf(item), 1)
//  console.log(filteredData.value)
// }
</script>
<template>
  <div>
    <span class="title">相关搜索：</span>
    <el-tag
      class="tags"
      type="primary"
      v-for="(item, index) in filteredData"
      :key="index"
      @click="Country(item)"
    >
      {{ item }}
    </el-tag>
    <el-tag class="tags" @click="linkMore">{{ showMore ? "收起" : "展开" }}</el-tag>
  </div>
</template>
<style lang="scss" scoped>
.title{
  margin-top:.3rem
}
.tags {
  cursor: pointer;
  color:var(--el-color-primary-light-3);
  // margin-right: 0.625rem;
  margin:.3rem 0.625rem .3rem 0;
}
</style>
